<template>
  <div>
    <div><topNav /></div>
    <div class="container">
      <div class="container-img">
        <img src="../../static/complain.png" alt="" />
      </div>
      <el-divider></el-divider>
      <div class="box">
        <!-- 投诉与建议 -->
        <div class="suggest flex">
          <div>投诉与建议</div>
          <!-- <form action=""> -->
          <textarea v-model="com"></textarea>
          <!-- </form> -->
        </div>
        <!-- 电子邮箱 -->
        <div class="e-mail flex">
          <div>电子邮箱</div>
          <input type="email" v-model="mail" />
        </div>
        <!-- 提交按钮 -->
        <div class="submit" @click="submit">提交</div>
      </div>
    </div>
    <div><bottom /></div>
  </div>
</template>

<script>
import topNav from "../components/topNav.vue";
import bottom from "../components/bottom.vue";
export default {
  components: {
    topNav,
    bottom,
  },
  data() {
    return {
      com: "",
      mail: "",
    };
  },
  methods: {
    submit() {
      if (this.com !== "" && this.mail !== "") {
        this.open2();
        this.com = ""
        this.mail = ""
      }
    },
    open2() {
      this.$message({
        message: "提交成功",
        type: "success",
      });
    },
  },
};
</script>
<style scoped>
.container {
  position: relative;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 0.1rem;
  min-height: 5.5rem;
  margin-top: 1%;
}
.container-img {
  padding: 3% 0 0 3%;
}
.container-img img {
  width: 30%;
}

.flex {
  display: flex;
  justify-content: flex-end;
  position: relative;
  right: 50%;
  transform: translateX(35%);
}
.flex div {
  text-align: end;
  font-size: 0.14rem;
  font-weight: 550;
}
input {
  outline: none;
  background-color: rgb(242, 242, 242);
  width: 60%;
  border: 1px solid rgb(242, 242, 242);
  border-radius: 0.1rem;
  margin-left: 2%;
}
.suggest textarea {
  height: 2rem;
  width: 60%;
  resize: none;
  background-color: rgb(242, 242, 242);
  border: 1px solid rgb(242, 242, 242);
  border-radius: 0.1rem;
  outline: none;
  display: inline-block;
  margin-left: 2%;
}
.e-mail {
  margin-top: 4%;
  align-items: center;
}
.e-mail input {
  height: 0.3rem;
}
.submit {
  margin-top: 4%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(229, 0, 28);
  display: inline-block;
  color: #fff;
  font-size: 0.14rem;
  padding: 1% 2%;
  border-radius: 0.1rem;
}
</style>
<style>
.el-message__icon,
.el-icon-success {
  font-size: 0.2rem;
}
</style>